<template>
  <div class="trading-terminal">
    <!-- 顶部工具栏 -->
    <div class="terminal-header">
      <div class="pair-selector">
        <el-select 
          v-model="selectedPair" 
          @change="handlePairChange"
          style="width: 180px"
          size="large"
          placeholder="选择交易对"
          :loading="tradingPairs.length === 0"
        >
          <el-option
            v-for="pair in tradingPairs"
            :key="pair.symbol"
            :label="pair.symbol"
            :value="pair.symbol"
          >
            <template #default>
              <div class="pair-option">
                <span class="pair-icon">{{ pair.icon }}</span>
                <div class="pair-info">
                  <div class="pair-symbol">{{ pair.symbol }}</div>
                  <div class="pair-price">${{ formatPrice(pair.price) }}</div>
                </div>
                <div class="pair-change" :class="pair.change24h >= 0 ? 'positive' : 'negative'">
                  {{ pair.change24h >= 0 ? '+' : '' }}{{ pair.change24h }}%
                </div>
              </div>
            </template>
          </el-option>
        </el-select>
      </div>
      
      <div class="price-ticker" v-if="currentPair">
        <div class="ticker-main">
          <span class="current-price" :class="priceChangeClass">
            ${{ formatPrice(currentPair.price) }}
          </span>
          <span class="price-change" :class="currentPair.change24h >= 0 ? 'positive' : 'negative'">
            {{ currentPair.change24h >= 0 ? '+' : '' }}{{ formatNumber(currentPair.change24h) }}%
          </span>
        </div>
        <div class="ticker-stats">
          <span class="stat-item">
            <label>24h高:</label>
            <span>${{ formatPrice(currentPair.high24h) }}</span>
          </span>
          <span class="stat-item">
            <label>24h低:</label>
            <span>${{ formatPrice(currentPair.low24h) }}</span>
          </span>
          <span class="stat-item">
            <label>24h量:</label>
            <span>{{ formatVolume(currentPair.volume24h) }}</span>
          </span>
        </div>
      </div>
      
      <div class="header-actions">
        <el-button-group>
          <el-button 
            :type="viewMode === 'standard' ? 'primary' : 'default'"
            @click="viewMode = 'standard'"
            size="small"
          >
            标准视图
          </el-button>
          <el-button 
            :type="viewMode === 'advanced' ? 'primary' : 'default'"
            @click="viewMode = 'advanced'"
            size="small"
          >
            高级视图
          </el-button>
        </el-button-group>
      </div>
    </div>

    <!-- 主要交易区域 -->
    <div class="terminal-main" :class="viewMode">
      <!-- 左侧区域 -->
      <div class="terminal-left">
        <!-- K线图表区域 -->
        <el-card class="chart-card">
          <template #header>
            <div class="chart-header">
              <span>K线图表</span>
              <div class="chart-controls">
                <el-button-group size="small">
                  <el-button 
                    v-for="interval in timeIntervals"
                    :key="interval.value"
                    :type="selectedInterval === interval.value ? 'primary' : 'default'"
                    @click="selectedInterval = interval.value"
                  >
                    {{ interval.label }}
                  </el-button>
                </el-button-group>
              </div>
            </div>
          </template>
          <div class="chart-container">
            <div class="chart-placeholder">
              <el-icon class="chart-icon"><TrendCharts /></el-icon>
              <p>TradingView K线图表</p>
              <p class="chart-desc">{{ selectedPair }} - {{ selectedInterval }}</p>
            </div>
          </div>
        </el-card>

        <!-- 最近成交 - 仅高级视图显示 -->
        <el-card class="trades-card" v-if="viewMode === 'advanced'">
          <template #header>
            <span>最近成交</span>
          </template>
          <div class="trades-list">
            <div class="trades-header">
              <span>价格</span>
              <span>数量</span>
              <span>时间</span>
            </div>
            <div 
              v-for="trade in recentTrades"
              :key="trade.id"
              class="trade-item"
              :class="trade.side"
            >
              <span class="trade-price">${{ formatPrice(trade.price) }}</span>
              <span class="trade-size">{{ formatNumber(trade.size) }}</span>
              <span class="trade-time">{{ trade.time }}</span>
            </div>
          </div>
        </el-card>

        <!-- 市场深度图 - 仅高级视图显示 -->
        <el-card class="depth-chart-card" v-if="viewMode === 'advanced'">
          <template #header>
            <span>市场深度</span>
          </template>
          <div class="depth-chart">
            <div class="depth-placeholder">
              <el-icon class="depth-icon"><DataLine /></el-icon>
              <p>深度图表</p>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 中间区域 -->
      <div class="terminal-center">
        <!-- 订单簿 -->
        <el-card class="orderbook-card">
          <template #header>
            <span>订单簿</span>
          </template>
          <div class="orderbook-container">
            <!-- 卖单区域 -->
            <div class="orderbook-asks">
              <div class="orderbook-header">
                <span>价格</span>
                <span>数量</span>
                <span>累计</span>
              </div>
              <div 
                v-for="ask in orderBook.asks"
                :key="ask.price"
                class="orderbook-item ask"
                @click="selectPrice(ask.price)"
              >
                <span class="price">${{ formatPrice(ask.price) }}</span>
                <span class="size">{{ formatNumber(ask.size) }}</span>
                <span class="total">{{ formatNumber(ask.total) }}</span>
                <div class="depth-bar" :style="{ width: (ask.total / maxDepth * 100) + '%' }"></div>
              </div>
            </div>

            <!-- 价差显示 -->
            <div class="price-spread">
              <div class="spread-info">
                <span class="spread-label">价差</span>
                <span class="spread-value">
                  ${{ formatPrice(orderBook.asks[0]?.price - orderBook.bids[0]?.price || 0) }}
                </span>
              </div>
            </div>

            <!-- 买单区域 -->
            <div class="orderbook-bids">
              <div 
                v-for="bid in orderBook.bids"
                :key="bid.price"
                class="orderbook-item bid"
                @click="selectPrice(bid.price)"
              >
                <span class="price">${{ formatPrice(bid.price) }}</span>
                <span class="size">{{ formatNumber(bid.size) }}</span>
                <span class="total">{{ formatNumber(bid.total) }}</span>
                <div class="depth-bar" :style="{ width: (bid.total / maxDepth * 100) + '%' }"></div>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 右侧区域 -->
      <div class="terminal-right">
        <!-- 下单面板 -->
        <el-card class="trading-panel">
          <template #header>
            <div class="panel-header">
              <el-segmented 
                v-model="orderSide" 
                :options="[
                  { label: '买入', value: 'buy' },
                  { label: '卖出', value: 'sell' }
                ]"
              />
            </div>
          </template>
          
          <el-form :model="orderForm" class="order-form">
            <!-- 订单类型 -->
            <el-form-item label="订单类型">
              <el-select v-model="orderForm.type" style="width: 100%">
                <el-option label="市价单" value="market" />
                <el-option label="限价单" value="limit" />
                <el-option label="止损单" value="stop" />
              </el-select>
            </el-form-item>

            <!-- 价格输入 -->
            <el-form-item label="价格" v-if="orderForm.type !== 'market'">
              <el-input-number
                v-model="orderForm.price"
                :precision="getPricePrecision()"
                :step="0.01"
                style="width: 100%"
                placeholder="输入价格"
              />
            </el-form-item>

            <!-- 止损价格 -->
            <el-form-item label="止损价格" v-if="orderForm.type === 'stop'">
              <el-input-number
                v-model="orderForm.stopPrice"
                :precision="getPricePrecision()"
                :step="0.01"
                style="width: 100%"
                placeholder="输入止损价格"
              />
            </el-form-item>

            <!-- 数量输入 -->
            <el-form-item label="数量">
              <el-input-number
                v-model="orderForm.quantity"
                :precision="getQuantityPrecision()"
                :step="0.001"
                style="width: 100%"
                placeholder="输入数量"
              />
            </el-form-item>

            <!-- 快速数量选择 -->
            <el-form-item>
              <div class="quantity-buttons">
                <el-button 
                  v-for="percent in [25, 50, 75, 100]"
                  :key="percent"
                  size="small"
                  @click="setQuantityByPercent(percent)"
                >
                  {{ percent }}%
                </el-button>
              </div>
            </el-form-item>

            <!-- 预估金额 -->
            <el-form-item>
              <div class="order-summary">
                <div class="summary-item">
                  <span>预估金额:</span>
                  <span class="amount">${{ formatNumber(estimatedAmount) }}</span>
                </div>
                <div class="summary-item" v-if="orderForm.type !== 'market'">
                  <span>手续费:</span>
                  <span class="fee">${{ formatNumber(estimatedFee) }}</span>
                </div>
              </div>
            </el-form-item>

            <!-- 下单按钮 -->
            <el-form-item>
              <el-button
                :type="orderSide === 'buy' ? 'success' : 'danger'"
                style="width: 100%"
                size="large"
                @click="submitOrder"
                :loading="orderLoading"
                :disabled="!canSubmitOrder"
              >
                {{ orderSide === 'buy' ? '买入' : '卖出' }} {{ currentPair?.baseAsset }}
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 余额信息 -->
        <el-card class="balance-card">
          <template #header>
            <span>账户余额</span>
          </template>
          <div class="balance-list">
            <div 
              v-for="balance in relevantBalances"
              :key="balance.asset"
              class="balance-item"
            >
              <div class="balance-info">
                <span class="asset">{{ balance.asset }}</span>
                <span class="free">{{ formatNumber(balance.free) }}</span>
              </div>
              <div class="balance-detail">
                <span class="locked">冻结: {{ formatNumber(balance.locked) }}</span>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 当前订单 -->
        <el-card class="orders-card">
          <template #header>
            <div class="orders-header">
              <span>当前订单</span>
              <el-button size="small" @click="refreshOrders">
                <el-icon><Refresh /></el-icon>
              </el-button>
            </div>
          </template>
          <div class="orders-list">
            <div v-if="activeOrders.length === 0" class="no-orders">
              暂无活跃订单
            </div>
            <div 
              v-for="order in activeOrders"
              :key="order.id"
              class="order-item"
            >
              <div class="order-main">
                <div class="order-info">
                  <span class="order-side" :class="order.side">
                    {{ order.side === 'buy' ? '买入' : '卖出' }}
                  </span>
                  <span class="order-symbol">{{ order.symbol }}</span>
                </div>
                <div class="order-details">
                  <div class="order-price">
                    {{ order.type === 'market' ? '市价' : '$' + formatPrice(order.price || 0) }}
                  </div>
                  <div class="order-quantity">
                    {{ formatNumber(order.quantity) }}
                  </div>
                </div>
              </div>
              <div class="order-actions">
                <el-button 
                  size="small" 
                  type="danger" 
                  @click="cancelOrder(order.id)"
                  :loading="cancelLoading === order.id"
                >
                  取消
                </el-button>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { TrendCharts, Refresh, DataLine } from '@element-plus/icons-vue'
import {
  fetchTradingPairs,
  fetchOrderBook,
  fetchRecentTrades,
  fetchBalances,
  fetchActiveOrders,
  createOrder,
  cancelOrder as cancelOrderApi,
  type TradingPair,
  type OrderBook,
  type Trade,
  type Balance,
  type Order,
  type CreateOrderRequest
} from '@/mock/tradingData'

// 响应式数据
const selectedPair = ref('BTCUSDT')
const selectedInterval = ref('1h')
const viewMode = ref<'standard' | 'advanced'>('standard')
const orderSide = ref<'buy' | 'sell'>('buy')
const orderLoading = ref(false)
const cancelLoading = ref<string | null>(null)
const priceChangeClass = ref('')

const tradingPairs = ref<TradingPair[]>([])
const orderBook = ref<OrderBook>({
  bids: [],
  asks: [],
  lastPrice: 0,
  priceChange: 0,
  priceChangePercent: 0
})
const recentTrades = ref<Trade[]>([])
const balances = ref<Balance[]>([])
const activeOrders = ref<Order[]>([])

// 订单表单
const orderForm = ref({
  type: 'limit' as 'market' | 'limit' | 'stop',
  price: undefined as number | undefined,
  stopPrice: undefined as number | undefined,
  quantity: undefined as number | undefined
})

// 时间间隔选项
const timeIntervals = [
  { label: '1分', value: '1m' },
  { label: '5分', value: '5m' },
  { label: '15分', value: '15m' },
  { label: '1小时', value: '1h' },
  { label: '4小时', value: '4h' },
  { label: '1天', value: '1d' }
]

// 计算属性
const currentPair = computed(() => {
  return tradingPairs.value.find(pair => pair.symbol === selectedPair.value)
})

const maxDepth = computed(() => {
  const maxBid = Math.max(...orderBook.value.bids.map(b => b.total))
  const maxAsk = Math.max(...orderBook.value.asks.map(a => a.total))
  return Math.max(maxBid, maxAsk)
})

const relevantBalances = computed(() => {
  if (!currentPair.value) return []
  return balances.value.filter(balance => 
    balance.asset === currentPair.value!.baseAsset || 
    balance.asset === currentPair.value!.quoteAsset
  )
})

const estimatedAmount = computed(() => {
  if (!orderForm.value.quantity || !currentPair.value) return 0
  const price = orderForm.value.type === 'market' 
    ? currentPair.value.price 
    : (orderForm.value.price || 0)
  return orderForm.value.quantity * price
})

const estimatedFee = computed(() => {
  return estimatedAmount.value * 0.001 // 0.1% 手续费
})

const canSubmitOrder = computed(() => {
  if (!orderForm.value.quantity || orderForm.value.quantity <= 0) return false
  if (orderForm.value.type !== 'market' && (!orderForm.value.price || orderForm.value.price <= 0)) return false
  if (orderForm.value.type === 'stop' && (!orderForm.value.stopPrice || orderForm.value.stopPrice <= 0)) return false
  return true
})

// 生命周期
onMounted(() => {
  loadInitialData()
  startDataRefresh()
})

// 监听交易对变化
watch(selectedPair, (newPair) => {
  loadPairData(newPair)
})

// 方法
const loadInitialData = async () => {
  try {
    const [pairs, balanceData, orders] = await Promise.all([
      fetchTradingPairs(),
      fetchBalances(),
      fetchActiveOrders()
    ])
    
    tradingPairs.value = pairs
    balances.value = balanceData
    activeOrders.value = orders
    
    // 加载默认交易对数据
    await loadPairData(selectedPair.value)
  } catch (error) {
    ElMessage.error('加载数据失败')
  }
}

const loadPairData = async (symbol: string) => {
  try {
    const [orderBookData, tradesData] = await Promise.all([
      fetchOrderBook(symbol),
      fetchRecentTrades(symbol)
    ])
    
    orderBook.value = orderBookData
    recentTrades.value = tradesData
    
    // 设置默认价格
    if (orderBookData.bids.length > 0) {
      orderForm.value.price = orderBookData.bids[0].price
    }
  } catch (error) {
    ElMessage.error('加载交易对数据失败')
  }
}

const startDataRefresh = () => {
  // 每2秒刷新一次数据
  setInterval(() => {
    loadPairData(selectedPair.value)
  }, 2000)
  
  // 每5秒刷新余额
  setInterval(() => {
    fetchBalances().then(data => {
      balances.value = data
    })
  }, 5000)
}

const handlePairChange = (symbol: string) => {
  selectedPair.value = symbol
}

const selectPrice = (price: number) => {
  if (orderForm.value.type !== 'market') {
    orderForm.value.price = price
  }
}

const setQuantityByPercent = (percent: number) => {
  if (!currentPair.value) return
  
  const relevantBalance = orderSide.value === 'buy' 
    ? balances.value.find(b => b.asset === currentPair.value!.quoteAsset)
    : balances.value.find(b => b.asset === currentPair.value!.baseAsset)
  
  if (!relevantBalance) return
  
  if (orderSide.value === 'buy') {
    const price = orderForm.value.type === 'market' 
      ? currentPair.value.price 
      : (orderForm.value.price || currentPair.value.price)
    const maxQuantity = relevantBalance.free / price
    orderForm.value.quantity = (maxQuantity * percent / 100)
  } else {
    orderForm.value.quantity = (relevantBalance.free * percent / 100)
  }
}

const submitOrder = async () => {
  if (!canSubmitOrder.value || !currentPair.value) return
  
  orderLoading.value = true
  try {
    const orderRequest: CreateOrderRequest = {
      symbol: selectedPair.value,
      side: orderSide.value,
      type: orderForm.value.type,
      quantity: orderForm.value.quantity!,
      price: orderForm.value.price,
      stopPrice: orderForm.value.stopPrice
    }
    
    const newOrder = await createOrder(orderRequest)
    activeOrders.value.push(newOrder)
    
    ElMessage.success('订单提交成功')
    
    // 重置表单
    orderForm.value.quantity = undefined
    if (orderForm.value.type === 'market') {
      orderForm.value.price = undefined
    }
    
    // 刷新余额
    balances.value = await fetchBalances()
  } catch (error) {
    ElMessage.error('订单提交失败')
  } finally {
    orderLoading.value = false
  }
}

const cancelOrder = async (orderId: string) => {
  cancelLoading.value = orderId
  try {
    const success = await cancelOrderApi(orderId)
    if (success) {
      const orderIndex = activeOrders.value.findIndex(order => order.id === orderId)
      if (orderIndex !== -1) {
        activeOrders.value[orderIndex].status = 'canceled'
      }
      ElMessage.success('订单已取消')
    } else {
      ElMessage.error('取消订单失败')
    }
  } catch (error) {
    ElMessage.error('取消订单失败')
  } finally {
    cancelLoading.value = null
  }
}

const refreshOrders = async () => {
  try {
    activeOrders.value = await fetchActiveOrders()
  } catch (error) {
    ElMessage.error('刷新订单失败')
  }
}

// 工具函数
const formatPrice = (price: number): string => {
  return price < 1 ? price.toFixed(4) : price.toFixed(2)
}

const formatNumber = (num: number): string => {
  if (num >= 1000000) {
    return (num / 1000000).toFixed(1) + 'M'
  } else if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K'
  }
  return num.toFixed(4)
}

const formatVolume = (volume: number): string => {
  if (volume >= 1000000) {
    return (volume / 1000000).toFixed(1) + 'M'
  } else if (volume >= 1000) {
    return (volume / 1000).toFixed(1) + 'K'
  }
  return volume.toFixed(2)
}

const getPricePrecision = (): number => {
  return currentPair.value?.price && currentPair.value.price < 1 ? 4 : 2
}

const getQuantityPrecision = (): number => {
  return 4
}
</script>

<style lang="scss" scoped>
.trading-terminal {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

.terminal-header {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: white;
  border-bottom: 1px solid #e4e7ed;
  gap: 20px;

  .pair-selector {
    .pair-option {
      display: flex;
      align-items: center;
      gap: 10px;

      .pair-icon {
        font-size: 16px;
        width: 20px;
        text-align: center;
      }

      .pair-info {
        flex: 1;

        .pair-symbol {
          font-weight: 600;
          font-size: 14px;
        }

        .pair-price {
          font-size: 12px;
          color: #666;
        }
      }

      .pair-change {
        font-size: 12px;
        font-weight: 600;

        &.positive {
          color: #67c23a;
        }

        &.negative {
          color: #f56c6c;
        }
      }
    }
  }

  .price-ticker {
    flex: 1;

    .ticker-main {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 5px;

      .current-price {
        font-size: 24px;
        font-weight: 600;
        color: #1f2937;

        &.positive {
          color: #67c23a;
        }

        &.negative {
          color: #f56c6c;
        }
      }

      .price-change {
        font-size: 14px;
        font-weight: 600;

        &.positive {
          color: #67c23a;
        }

        &.negative {
          color: #f56c6c;
        }
      }
    }

    .ticker-stats {
      display: flex;
      gap: 20px;

      .stat-item {
        font-size: 12px;
        color: #666;

        label {
          margin-right: 5px;
        }
      }
    }
  }
}

.terminal-main {
  flex: 1;
  display: grid;
  gap: 1px;
  background: #e4e7ed;
  padding: 1px;

  &.standard {
    grid-template-columns: 1fr 300px 320px;
    grid-template-areas: "chart orderbook trading";
    
    .chart-card {
      .chart-container {
        height: 500px; // 标准视图K线图更大
      }
    }
  }

  &.advanced {
    grid-template-columns: 1fr 200px 300px 320px;
    grid-template-areas: "chart trades orderbook trading";
    
    .chart-card {
      .chart-container {
        height: 350px; // 高级视图K线图稍小，为其他组件留空间
      }
    }
    
    .trades-card {
      grid-area: trades;
      height: 350px;
    }
    
    .depth-chart-card {
      height: 200px;
    }
  }

  .terminal-left {
    grid-area: chart;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .terminal-center {
    grid-area: orderbook;
  }

  .terminal-right {
    grid-area: trading;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
}

.chart-card {
  flex: 1;
  border: none;

  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .chart-container {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
    border-radius: 8px;

    .chart-placeholder {
      text-align: center;
      color: #909399;

      .chart-icon {
        font-size: 48px;
        margin-bottom: 10px;
      }

      p {
        margin: 5px 0;
        font-size: 14px;
      }

      .chart-desc {
        font-size: 12px;
        color: #c0c4cc;
      }
    }
  }
}

.trades-card {
  height: 300px;
  border: none;

  .trades-list {
    height: 100%;
    overflow-y: auto;

    .trades-header {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      padding: 8px 0;
      font-size: 12px;
      color: #909399;
      border-bottom: 1px solid #e4e7ed;
      font-weight: 600;
    }

    .trade-item {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      padding: 6px 0;
      font-size: 12px;
      cursor: pointer;

      &:hover {
        background: #f5f7fa;
      }

      &.buy .trade-price {
        color: #67c23a;
      }

      &.sell .trade-price {
        color: #f56c6c;
      }

      .trade-price {
        font-weight: 600;
      }

      .trade-time {
        color: #909399;
      }
    }
  }
}

.orderbook-card {
  height: 100%;
  border: none;

  .orderbook-container {
    height: 500px;
    display: flex;
    flex-direction: column;
  }

  .orderbook-asks,
  .orderbook-bids {
    flex: 1;
    overflow-y: auto;
  }

  .orderbook-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 8px 0;
    font-size: 12px;
    color: #909399;
    border-bottom: 1px solid #e4e7ed;
    font-weight: 600;
  }

  .orderbook-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 4px 0;
    font-size: 12px;
    cursor: pointer;

    &:hover {
      background: rgba(0, 0, 0, 0.05);
    }

    &.ask {
      .price {
        color: #f56c6c;
      }

      .depth-bar {
        background: rgba(245, 108, 108, 0.1);
      }
    }

    &.bid {
      .price {
        color: #67c23a;
      }

      .depth-bar {
        background: rgba(103, 194, 58, 0.1);
      }
    }

    .depth-bar {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      z-index: 0;
    }

    > span {
      position: relative;
      z-index: 1;
    }

    .price {
      font-weight: 600;
    }
  }

  .price-spread {
    padding: 10px 0;
    text-align: center;
    border-top: 1px solid #e4e7ed;
    border-bottom: 1px solid #e4e7ed;
    background: #fafbfc;

    .spread-info {
      font-size: 12px;

      .spread-label {
        color: #909399;
        margin-right: 8px;
      }

      .spread-value {
        font-weight: 600;
        color: #606266;
      }
    }
  }
}

.depth-chart-card {
  border: none;

  .depth-chart {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
    border-radius: 8px;

    .depth-placeholder {
      text-align: center;
      color: #909399;

      .depth-icon {
        font-size: 32px;
        margin-bottom: 8px;
      }

      p {
        margin: 0;
        font-size: 14px;
      }
    }
  }
}

.trading-panel {
  border: none;

  .panel-header {
    display: flex;
    justify-content: center;
  }

  .order-form {
    .quantity-buttons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }

    .order-summary {
      .summary-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        font-size: 14px;

        .amount {
          font-weight: 600;
          color: #1f2937;
        }

        .fee {
          color: #909399;
        }
      }
    }
  }
}

.balance-card,
.orders-card {
  border: none;

  .orders-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.balance-list {
  .balance-item {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .balance-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 4px;

      .asset {
        font-weight: 600;
        color: #1f2937;
      }

      .free {
        font-weight: 600;
        color: #67c23a;
      }
    }

    .balance-detail {
      .locked {
        font-size: 12px;
        color: #909399;
      }
    }
  }
}

.orders-list {
  .no-orders {
    text-align: center;
    color: #909399;
    padding: 20px;
    font-size: 14px;
  }

  .order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .order-main {
      flex: 1;

      .order-info {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 4px;

        .order-side {
          font-size: 12px;
          font-weight: 600;

          &.buy {
            color: #67c23a;
          }

          &.sell {
            color: #f56c6c;
          }
        }

        .order-symbol {
          font-size: 12px;
          color: #909399;
        }
      }

      .order-details {
        font-size: 12px;
        color: #606266;

        .order-price {
          font-weight: 600;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .terminal-main {
    &.standard {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr auto auto;
      grid-template-areas: 
        "chart"
        "orderbook"
        "trading";
    }

    &.advanced {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr auto auto auto;
      grid-template-areas: 
        "chart"
        "trades"
        "orderbook"
        "trading";
    }
  }

  .terminal-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;

    .price-ticker {
      width: 100%;

      .ticker-stats {
        flex-wrap: wrap;
        gap: 10px;
      }
    }
  }
}
</style>